<template>
	<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import echarts from 'echarts'
	require('echarts/theme/macarons') // echarts theme
	import resize from './mixins/resize'

	const animationDuration = 6000

	export default {
		mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			showtype: {
				type: String,
				default: '电流'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '300px'
			}
		},
		data() {
			return {
				chart: null,
				random: 20
			}
		},
		mounted() {
			let that = this;
			that.$nextTick(() => {
				that.initChart()
				// setInterval(function () {
				//   that.random = +(Math.random() * 60).toFixed(2);
				//   that.initChart();
				// }, 2000);
			})
		},
		beforeDestroy() {
			if (!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		methods: {
			setnum(datas) {
				//console.log("z", datas);
				let that = this;
				that.random = datas;
				that.$nextTick(() => {
					that.initChart();
				})
			},
			initChart() {
				let that = this;
				this.chart = echarts.init(this.$el, 'macarons')

				this.chart.setOption({
					"title": {
						"text": this.showtype,
						"textStyle": {
							"color": "#606266",
							"fontWeight": "normal",
							"fontSize": 14
						},
						"bottom": "10%",
						"left": "center"
					},
					"series": [{
						"type": "gauge",
						min:-30,
						max:50,
						"progress": {
							"show": true,
							"width": 4,
							"itemStyle": {
								"color": "#FBB61B"
							}

						},
						"axisLine": {
							"lineStyle": {
								"width": 4
							}
						},
						"axisTick": {
							"show": true
						},
						"splitLine": {
							"length": 10,
							"lineStyle": {
								"width": 1,
								"color": "#999"
							}
						},
						"axisLabel": {
							"distance": 10,
							"color": "#999",
							"fontSize": 10
						},
						"pointer": {
							"itemStyle": {
								"color": "#FBB61B"
							}
						},
						"anchor": {
							"show": true,
							"showAbove": true,
							"size": 10,
							"itemStyle": {
								"borderWidth": 1,
								"itemStyle": {
									"color": "#FBB61B",
									"borderColor": "#FBB61B"
								}
							}
						},
						"detail": {
							"valueAnimation": true,
							"fontSize": 18,
							"formatter": "{value} A",
							"color": "#FBB61B",
							"offsetCenter": [0, "30%"]
						},
						"data": [{
							"value": that.random
						}]
					}]
				})
			}
		}
	}
</script>
